<template>
  <div class="common-scroll">
    <scroll-view
      :key="id"
      :scroll-y="true"
      :enhanced="true"
      :showScrollbar="false"
      :refresherEnabled="pulldownEnabled"
      :refresherTriggered="pullDownStatus"
      refresherBackground="transparent"
      @refresherRefresh="onRefresh"
      @refresherAbort="onAbort"
      @refresherRestore="onRestore"
      @scrollToLower="onPullup"
      @scroll="onScroll"
      class="common-scroll__view"
    >
      <div class="common-scroll__view-wrapped" :style="{ height }">
        <slot></slot>

        <template v-if="pullupEnabled && (loadMore || pullUpStatus)">
          <div class="common-scroll__view-loadMore">
            <span>
              {{
                pullUpStatus
                  ? "加载中..."
                  : loadMore
                  ? "上拉加载更多"
                  : "没有更多数据了"
              }}
            </span>
          </div>
        </template>
      </div>
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

export type CommonScrollProps = {
  id?: string;
  height?: string;
  loadMore?: boolean;
  pulldownEnabled?: boolean;
  pullupEnabled?: boolean;
  onPulldown?: (done: () => void) => void;
  onPullup?: (done: () => void) => void;
};

defineOptions({
  name: "common-scroll",
});

const props = withDefaults(defineProps<CommonScrollProps>(), {
  id: "modifiedScrollKey",
  loadMore: false,
  pulldownEnabled: true,
  pullupEnabled: false,
});

const emits = defineEmits([
  "pull-down",
  "pull-up",
  "scroll",
  "scroll-to-lower",
]);

const pullDownStatus = ref(false);
const pullUpStatus = ref(false);
const touchLower = ref(false);
const pullDownRestore = ref(false);

const onScroll = () => {};

const onAbort = () => {
  console.log("=== abort");
};

const onRestore = () => {
  pullDownRestore.value = true;
  pullDownStatus.value = false;
  // 需要终止请求
};
const onRefresh = () => {
  const { onPulldown } = props;

  pullDownRestore.value = false;
  pullDownStatus.value = true;
  emits("pull-down", () => {
    pullDownStatus.value = false;
  });
  if (onPulldown) {
    onPulldown(() => {
      pullDownStatus.value = false;
    });
  }
};

const onPullup = () => {
  // console.log(pullDownRestore.value, "pullDownRestore");
  if (pullDownRestore.value) return;

  // console.log("======= onPullup");
  touchLower.value = true;

  emits("scroll-to-lower", () => {
    touchLower.value = false;
  });
  const { loadMore, onPullup, pullupEnabled } = props;
  if (!pullupEnabled || !loadMore) return;

  pullUpStatus.value = true;
  emits("pull-up", () => {
    pullUpStatus.value = false;
    touchLower.value = false;
  });
  // console.log(onPullup);
  if (onPullup) {
    onPullup(() => {
      pullUpStatus.value = false;
      touchLower.value = false;
    });
  }
};
</script>

<style lang="less">
.common-scroll {
  width: 100%;
  height: 100%;
  &__view {
    width: 100%;
    height: 100%;
    &-wrapped {
      width: 100%;
      min-height: 100%;
    }
    &-loadMore {
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #8b8b8b;
    }
  }
}
</style>
